<template>
  <div>
    <!-- 移动设备 -->
    <el-dialog title="移动设备" :visible.sync="dialogVisible" width="30%">
      <!-- body -->
      <el-form ref="form" label-width="85px">
        <!-- 卡号 -->
        <el-form-item label="卡号:">
          <el-input v-model="inputValue" disabled></el-input>
        </el-form-item>
        <!-- 归属部门 -->
        <el-form-item label="归属部门:">
          <treeselect
            v-model="deptId"
            :options="deptOptions"
            :show-count="true"
            :searchable="false"
            :clearable="false"
          />
        </el-form-item>
      </el-form>
      <!-- button -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmButton">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { treeselect } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect' // import the component
import '@riophae/vue-treeselect/dist/vue-treeselect.css' // import the styles
import { mapState } from 'vuex'
import { editDept } from '@/api/equipment/list' // import 查询设备 api
export default {
  name: 'moveDialog',
  props: {
    // 设备编号
    ids: {
      type: Array,
      default: function () {
        return []
      }
    },
    // checkbox部门id
    depts: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  components: { Treeselect },
  data () {
    return {
      title: '移动设备',
      dialogVisible: false, // 显示对话框
      deptOptions: undefined, // 部门树选项
      deptId: undefined, // 部门id
      isDisabled: true,
      isDisabled222: false
    }
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect () {
      treeselect().then(response => {
        this.deptOptions = response.data
        this.deptId = response.data[0].id
      })
    },
    // 确定
    async confirmButton () {
      // debugger
      if (this.depts.includes(this.deptId)) {
        this.$message({
          showClose: true,
          message: '提交失败,不能提交到相同的部门',
          type: 'error'
        })
      } else {
        const res = await editDept(this.deptId, this.ids)
        // console.log(res)
        if (res.code === 200) {
          this.dialogVisible = false // 关闭对话框
          this.$message.success(res.msg) // 提示
          this.$emit('dialogEvent') // 刷新分页
          this.$emit('getTree')
        }
      }
    }
  },
  computed: {
    ...mapState(['tree']),
    // 把父组件传递过来的编号值显示到Dialog卡号
    inputValue () {
      let arr = []
      let str = ''
      for (let i = 0; i < this.ids.length; i++) {
        arr.push(this.ids[i])
      }
      str = arr.join(' ')
      return str
    }
  },
  created () {
    this.getTreeselect()
  },
  mounted () {},
  updated () {},
  watch: {
    deptOptions (newVal, oldVal) {
      // console.log(newVal)
    }
  }
}
</script>
<style lang="scss" scoped></style>
